<template>
	<view class="list-right" :style="{'z-index': isShow ? 300:10}">
		<view class="author-img">
			<view @click="toCreaterPage">
				<image class="img" :src="video.shop_logo"></image>
				<view class="follow cuIcon-add" >
					<image @click.stop="addfollow" v-if="video.is_follow==0" src="../../static/images/flow_before.png" mode=""></image>
					<image @click.stop="cancelFollow" v-else src="../../static/images/flow_after.png" mode=""></image>
				</view>
				<!--  v-show="!isFollow" @click="handleFollow"  -->
			</view>
		</view>
		<view class="right-box">
			<!-- <view class="icon cuIcon-likefill" :class="{fav: isFav}" @click="handleFollow"></view> -->
			<image @click="handleFollow" v-if="video.is_like == 0" class='icon' src="../../static/images/like_before.png" mode=""></image>
			<image @click="handleFollow" v-else class='icon' src="../../static/images/like_after.png"></image>
			<view class="count">{{video.praise_num}}</view>
		</view>
<!-- 		<view class="right-box">
			<!-- <view class="icon cuIcon-commentfill" @click="handleComment"></view>
			<image class='icon' src="../../static/images/common.png" mode=""></image>
			<view class="count">{{videoInfo.commentNum}}</view>
		</view> -->
		<!--  #ifdef  MP-WEIXIN -->
			<view class="right-box" @click="handleForward">
					<image class='icon' src="../../static/images/plyaer_share.png" mode=""></image>
					<view class="count">分享</view>
					<button class="share_btn" open-type="share"></button>
			</view>
		<!--  #endif -->
	
		<view v-if="video.is_coupon ==1" class="music-img" @click="close" :class="{'pauseAnimate': isLike}">
			<image class="img" src="../../static/images/coupon_player.png" />
		</view>
		<coupon :couponList="list" :isShow="isShow" @getcoupon='setCoupon' @close='close'></coupon>
	</view>
</template>

<script>
	import coupon from'../coupon.vue'
	export default {
		data() {
			return {
				baseUrl: getApp().globalData.baseUrl,
				fileUrl: getApp().globalData.fileUrl,
				isFollow: false,
				isFav: false,
				isPauseAnimate: true,
				isForward: false,
				isLike:false,
				avatar: '',
				userLogo:'',
				// userInfo: getApp().globalData.getGlobalUserInfo(),
				clickLoading: false,
				isShow:false,
				list: []
			}
		},
		mounted() {
			this.videoInfo = this.video
			this.avatar = this.fileUrl + this.video.avatar
			this.userLogo = this.video.shop_logo
			this.userInfo = this.$store.getters.getuserInfo
			return 
			this.getFav()
		},
		props: ['index', 'video'],
		components:{
			coupon
		},
		methods: {
			close(){
					
					if(this.list.length == 0){
						// uni.showLoading({
						// 	// title:'请求中'
						// })
						this.getCouponList()
					}else{
						this.isShow = !this.isShow
					}
				
			},
			// 获取点赞信息
			getFav() {
				uni.request({
					url: this.baseUrl + '/user/queryUserLike?userId=' + this.video.id+ '&videoId=' + this.video.id,
					method: 'POST',
					header: {
						'content-type': 'application/json',
						'userId': this.userInfo.id,
						'userToken': this.userInfo.userToken
					},
					success: (res) => {
						if (res.data.status === 200) {
							this.isFav = res.data.data
						}
					}
				})
			},
			// 打开评论界面
			handleComment() {
				uni.navigateTo({
					url: '../../pagesC/comment/comment?videoId=' + this.video.id + '&createrId=' + this.video.userId + '&videoDesc=' + this.video.videoDesc
				})
			},
			// 打开分享与举报
			handleForward() {
			},
			// 跳转到作者个人界面
			toCreaterPage() {
				uni.navigateTo({
					url: '../../pagesC/home/personage/personage?userId=' + this.video.shop_id
				})
			},
			// 点赞与取消点赞
			handleFollow() {
				console.log(				this.userInfo)
				if (this.clickLoading) {
					uni.showToast({
						title: "点击过于频繁 ~",
						icon: "none",
						duration: 1000
					})
					return
				}
				if (this.userInfo === null || this.userInfo === undefined || this.userInfo === '') {
					uni.showToast({
						title: "登录后才可以点赞噢 \r\n ∠( ᐛ 」∠)＿",
						icon: "none",
						duration: 2000
					})
					return
				}
				this.clickLoading = true
				let islike = this.video.is_like
				this.$http.videolike({
					videoid:this.video.id,
					islike
				}).then(res=>{
					if(res.status == 200){
						this.$emit('addLike',{
							islike:islike == 0 ? 1: 0,
							praise_num: res.data
						})
					}else if(res.status == 400){
						uni.showToast({
							title: "请先登录",
							icon: "none",
							duration: 1000
						})
					}
					this.clickLoading = false
				}).catch(err=>{
					uni.showToast({
						title: "服务器异常",
						icon: "none",
						duration: 2000
					})
					this.clickLoading = true
					return
				})
			},
			// 旋转动画暂停
			pauseAnimate() {
				this.isPauseAnimate = true
			},
			// 旋转动画开启
			playAnimate() {
				this.isPauseAnimate = false
			},
			getCouponList(){
				this.$http.getShopcoup({
					shop_id: this.video.shop_id,
					uid: this.userInfo.id
				}).then(res=>{
					uni.hideLoading()
					if(res.status == 200){
						this.list = res.data
						this.isShow = !this.isShow
					}else if(res.status == 400){
						wx.showToast({
							title: '请先登录',
							mask:true,
							icon:'none',
							duration:1500
						})
					}else{
						wx.showToast({
							title: res.mess,
							mask:true,
							icon:'none',
							duration:1500
						})
					}
				
				}).catch(err=>{
					wx.showToast({
						title: '服务器错误',
						mask:true,
						icon:'none',
						duration:1500
					})
				})
			},
			setCoupon(index){
				this.list[index].have = 1
			},
			addfollow(){
				if (this.clickLoading) {
					uni.showToast({
						title: "点击过于频繁 ~",
						icon: "none",
						duration: 1000
					})
					return
				}
				if (this.userInfo === null || this.userInfo === undefined || this.userInfo === '') {
					uni.showToast({
						title: "登录后才可以关注 \r\n ∠( ᐛ 」∠)＿",
						icon: "none",
						duration: 2000
					})
					return
				}
				this.clickLoading = true
				let shop_id = this.video.shop_id
				this.$http.addfollow({
					shop_id
				}).then(res=>{
					console.log(res)
					if(res.status == 200){
						// this.videoInfo.is_follow=1
						this.$emit('setFollow',this.video.shop_id)
					}
						this.clickLoading = false
				}).catch(err=>{
							this.clickLoading = false
				})
			},
			cancelFollow(){
				if (this.clickLoading) {
					uni.showToast({
						title: "点击过于频繁 ~",
						icon: "none",
						duration: 1000
					})
					return
				}
				if (this.userInfo === null || this.userInfo === undefined || this.userInfo === '') {
					uni.showToast({
						title: "登录后才可以关注 \r\n ∠( ᐛ 」∠)＿",
						icon: "none",
						duration: 2000
					})
					return
				}
				this.clickLoading = true
				let shop_id = this.video.shop_id
				this.$http.cancelfollow({
					shop_id
				}).then(res=>{
					console.log(res)
					if(res.status == 200){
						console.log('取消')
						// this.videoInfo.is_follow=0
						this.$emit('setFollow',this.video.shop_id)
					}
							this.clickLoading = false
				}).catch(err=>{
							this.clickLoading = false
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.share_btn{
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		opacity: 0;
	}
	.list-right {
		width: 120rpx;
		margin-right: 10rpx;
		display: flex;
		flex-direction: column;
		// align-items: flex-end;
		justify-content: flex-end;
		.author-img {
			position: relative;
			width: 120rpx;
			text-align: center;
			// margin-left: 32rpx;
			margin-bottom: 20rpx;
			.img {
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
				border: 2px solid #FFFFFF;
			}

			.follow {
				color: white;
				position: absolute;
				width: 60rpx;
				height: 40rpx;
				// background-color: #ff3d3d;
				border-radius: 20rpx;
				line-height: 30rpx;
				background: red;
				// border-radius: 50%;
				text-align: center;
				left: 36rpx;
				bottom: -8rpx;
				font-weight: bold;
				image{
					width: 100%;
					height: 100%;
				}
			}
		}

		.right-box {
			margin: 20rpx 0;
			color: white;
			text-align: center;
			font-size: 30rpx;
			display: flex;
			flex-direction: column;
			position: relative;
			// justify-content: center;
			align-items: center;
			.fav {
				color: #F43F3B;
			}	
			.count{
				text-align: right;
				margin-top: 15rpx;
			}
			.icon {
				width: 40rpx;
				height: 37rpx;
				font-size: 70rpx;
				transition: color .5s;
			}
		}

		.music-img {
			width: 120rpx;
			height: 120rpx;
			text-align: center;
			margin-top: 40rpx;
			// margin-left: 24rpx;
			.img {
				width: 120rpx;
				height: 87rpx;
				// border-radius: 50%;
				// background: #F1F1F1;
				// opacity: .8;
				// border: 2px solid #F1F1F1;
			}
		}

		.pauseAnimate {
			animation-play-state: paused;
		}
	}

	@keyframes around {
		0% {
			transform: rotate(0deg);
		}

		100% {
			transform: rotate(360deg);
		}
	}
</style>
